<template>
  <div>
    <!--  整体框架布局  -->
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
      <!--   左侧菜单区域   -->
      <a-layout-sider   v-model="collapsed" style="box-shadow:2px 0 6px rgba(0,21,41,0.35)" collapsible>
        <div class="logo">
          <img src="../assets/m10.png"
               v-show="collapsed === true" style="width: auto;height: auto;max-width: 100%;max-height: 100%"
               alt="">
          <img v-show="collapsed === false" style="width: auto;height: auto;max-width: 100%;max-height: 100%"
               src="../assets/lte.png" alt="">
        </div>
        <a-menu
            theme="dark"
            :default-selected-keys="defaultSelectedMenu"
            mode="inline">

          <!--    单层菜单 单独刷   -->
          <a-menu-item
              v-for="mitem in menuSet" v-bind:key="mitem.id"
              v-if="mitem.isMenu===1&& mitem.hasChild===0&& mitem.menuLevel===1"
              :key="mitem.routerName">
            <a-icon :type="mitem.iconType"/>
            <span>{{ mitem.note }}</span>
            <router-link :to="mitem.routerPath"></router-link>
          </a-menu-item>

          <!-- 双层菜单 单独刷-->
          <a-sub-menu v-for="(levelOne,i) in menuSet" v-bind:key="levelOne.id"
                      v-if="levelOne.isMenu===1 && levelOne.hasChild===1 && levelOne.menuLevel===1"
          >
            <span slot="title"><a-icon v-bind:type="levelOne.iconType"/><span>{{ levelOne.note }}</span></span>

            <a-menu-item v-if="getSubMenuSet(levelOne).length>0"
                         v-for="subMenu in getSubMenuSet(levelOne)" v-bind:key="subMenu.routerName">
              <a-icon v-show="subMenu.iconType !== undefined && subMenu.iconType !== null && subMenu.iconType !== ''"
                      :type="subMenu.iconType"/>
              <span>{{ subMenu.note }}</span>
              <router-link :to="subMenu.routerPath"></router-link>
            </a-menu-item>
          </a-sub-menu>


        </a-menu>
      </a-layout-sider>


      <!--   右侧   -->
      <a-layout>
        <!--  右上-按钮区域  -->
        <a-layout-header style="background: #fff; padding: 0;-webkit-box-shadow:0 1px 4px rgba(0,21,41,0.08) ; box-shadow:0 1px 4px rgba(0,21,41,0.08)">
          <!--  天气 ,北京时间,  通知栏, 全屏按钮,退出按钮,等      -->
          <div style="float: right">
            <span>{{weatherInfo.city}}天气：{{weatherInfo.wea+weatherInfo.tem2+'~'+weatherInfo.tem1}}度，{{weatherInfo.win+weatherInfo.win_speed}} </span>
            <TimeOut style="display: inline-block"></TimeOut>
            <span style="margin-right: 10px">{{weatherInfo.week}}</span>

            <a-button @click="showPersonal()" style="margin-right: 15px">
              <a-icon type="user"/>
              {{ loginAccount }}
            </a-button>

            <a-button @click="screenfullBtn()" style="margin-right: 15px">
              <a-icon type="fullscreen"/>
              全屏
            </a-button>

            <a-button @click="logoutSys()" type="primary" style="margin-right: 15px">
              <a-icon type="logout"/>
              退出
            </a-button>
          </div>
        </a-layout-header>

        <!--  右中-内容区域  -->
        <a-layout-content style="margin: 0 16px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>{{ this.$route.name }}</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ padding: '14px', background: '#fff', minHeight: '360px' }">
            <router-view></router-view>
          </div>
        </a-layout-content>

        <!--  右下-页脚区域      -->
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>



    </a-layout>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import originJSONP from "jsonp";
import TimeOut from "@/components/TimeOut";
import {getPrem} from "@/api/backend-api/login";
import {logout} from "@/api/backend-api/login";

export default {
  name: "SysLayout",
  components:{
    TimeOut
  },
  data(){
    return{
      myMockData:require("../../mock/menu.json"),
      mySetting:require("../../mock/my-setting.json"),
      weatherInfo: {},
      defaultSelectedMenu: ['defaultHome'],
      menuSet: [], //仅刷菜单组件用
      loginAccount: 'Personal',
      collapsed: false,
      currentUserId: null,
      stompClient: "",
      msgBoxInfos: [],
      visibleMsgBox: false,
      arrys: [],
    }
  },
  created() {
    this.getWeather();
  },
  methods:{
    getWeather() {
      let url3 = 'https://www.tianqiapi.com/api?version=v6&appid=85618448&appsecret=9ZfOvBsd&callback=ckp';
      let opts = {
        prefix: 'ckp'
      }
      //发起jsonP请求
      originJSONP(url3, opts, (err, data) => {
        console.log('????????????????===')
        if (!err) {
          console.log(data);
          this.weatherInfo = data;
        } else {
          console.log(err)
        }
      });
    },



    //全屏按钮事件
    screenfullBtn() {
      if (!screenfull.isEnabled) {
        this.$message.warning('浏览器不支持全屏!');
        return false;
      }
      screenfull.toggle();
      console.log(screenfull.isFullscreen)
      if (screenfull.isFullscreen) {
        this.$message.success('页面已退出全屏!');
      } else {
        this.$message.success('页面已全屏显示!');
      }
    },

    //退出按钮事件
    logoutSys(){

      //前台清掉sessionStorage, 后台清掉redis
      logout().then(res => {
        console.log(res);
        this.clearSessionAndPushLogin();
      }).catch(err => {
        console.log(err);
        this.clearSessionAndPushLogin();
      });
    },

    clearSessionAndPushLogin() {
      //前台清掉sessionStorage
      sessionStorage.clear();
      console.log(
          `%c lte-admin %c 退出系统ok %c`,
          'background:blue ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
          'background:red ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
          'background:transparent'
      );
      this.$router.push({path: '/'});
    },

    showPersonal() {
      this.$router.push({path: '/personal'});
    },

    getSubMenuSet(levelOne) {
      let arr = [];
      this.menuSet.forEach(m => {
        if (m.parentMenuId === levelOne.id) {
          arr.push(m);
        }
      });
      return arr;
    },

    openNotification() {
      this.$notification.success({
        message: '消息提醒',
        placement: 'bottomRight',
        duration: 2,
        description:
            '欢迎进入 LteAdmin',
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });
    },

  },
  mounted() {
    let tokenInfo = sessionStorage.getItem('tokenInfo');
    console.log('tokenInfo: '+tokenInfo)
    if (tokenInfo !== undefined && tokenInfo !==null){

      getPrem().then(res=>{
        console.log(res);
        let resultCode = res.data.code;
        if (resultCode===0){
          this.loginAccount = res.data.data.account;
          this.currentUserId = res.data.data.userId;

          sessionStorage.setItem('permData', JSON.stringify(res.data.data));

          let resArr = [];
          let originArr = [];
          originArr = res.data.data.menuEntitySet;
          originArr.forEach(a => {
            if (a.isMenu === 1) {
              resArr.push(a);
            }
          });
          this.menuSet = resArr;
          //欢迎进入系统
          this.openNotification();

        }else {
          sessionStorage.clear();
          this.$router.push({path: '/'});
          this.$message.success('用户未配置菜单权限!');
        }


      }).catch(err=>{
        console.log(err)
      })




    }else {
      this.$router.push({path: '/'})
    }

  },
  watch:{

  },
  beforeDestroy() {

  }


}
</script>

<style scoped>
#components-layout-demo-side .logo {
  height: 38px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  line-height: 38px;
}
</style>
